<template>
  <view class="page bg-white">
    <u-navbar :auto-back="true" bg-color="white" title="群发消息" :placeholder="true" :fixed="true" :border="false">
      <template #right>
        <view class="btn-send-message" @click="toHistory">
          历史记录
        </view>
      </template>
    </u-navbar>
    <view class="main">
      <u-form label-width="300rpx" label-style="font-weight:500;font-size:32rpx;color:#333" label-position="top"
        :model="form" ref="uForm">
        <u-form-item label="选择发送的对象">
          <view @click="showPerson = true" class="select-person-btn">
            <text v-if="selectPersonName">selectPersonName</text>
            <text style="color:#ccc" v-else>请选择发送的对象</text>
          </view>
          <!-- <u-input v-model="form.name" placeholder="请选择发送的对象" type="select" :disabled="true"
            @click="showPerson = true" /> -->
        </u-form-item>
        <u-form-item label="填写发送的内容">
          <u-input v-model="form.title" placeholder="请输入要发送的标题" />
        </u-form-item>
        <u-form-item label="">
          <u-textarea style="background:#F7F7F7" v-model="form.content" placeholder="请输入要发送的内容" />
        </u-form-item>
      </u-form>
      <u-action-sheet :actions="personList" :show="showPerson" @close="showPerson = false"
        @select="selectPerson"></u-action-sheet>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
const form = ref({
  name: '',
  title: '',
  content: '',
})
const selectPersonName = ref('')
const showPerson = ref(false)
const personList = ref([{
  name: '张三',
  value: '1'
}, {
  name: '李四',
  value: '2'
}, {
  name: '王五',
  value: '3'
}])
const selectPerson = (item) => {
  form.value.name = item.name
  showPerson.value = false
}
const toHistory = () => {
  uni.navigateTo({
    url: '/pages/teacher/message/history'
  });
}
</script>
<style scoped>
.select-person-btn {
  width: 100%;
  background: #F7F7F7;
  height: 80rpx;
  border-radius: 20rpx;
  border: none;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #333;
  padding: 0 20rpx;
}

.btn-send-message {
  background: #EEEEEE;
  padding: 10rpx 30rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  font-size: 24rpx;
  color: #333;
}
</style>